<template>
  <pageTabelLayout>
    <template #pageHeader>
    <a-form :model="form" layout="inline">
        <a-form-item label="流转卡号" label-col-flex="80px" style="width:300px">
            <a-input allow-clear class="bacClass" v-model="form.flowCardCode" />
        </a-form-item>
        <a-form-item label="布号" label-col-flex="80px" style="width:300px">
            <a-input allow-clear class="bacClass" v-model="form.clothCode" />
        </a-form-item>
        <a-form-item label="色称" label-col-flex="80px" style="width:300px">
            <a-input allow-clear class="bacClass" v-model="form.colorName" />
        </a-form-item>
        <a-form-item label="色号" label-col-flex="80px" style="width:300px">
            <a-input allow-clear class="bacClass" v-model="form.colorCode" />
        </a-form-item>
        <a-form-item label="染整单号" label-col-flex="80px" style="width:300px">
            <a-input allow-clear class="bacClass" v-model="form.orderCode" />
        </a-form-item>
        <a-form-item label="染色车间" label-col-flex="80px" style="width:300px">
            <a-select multiple popup-container="html" class="bacClass" v-model="form.workshops" allow-clear
                :max-tag-count="1">
                <a-option value="染部A">染部A</a-option>
                <a-option value="染部B"> 染部B</a-option>
            </a-select>
        </a-form-item>
        <a-form-item label="缸型" label-col-flex="80px" style="width:300px">
            <a-select multiple popup-container="html" class="bacClass" v-model="form.cylinderTypes" allow-clear
                :max-tag-count="1">
                <a-option :value="1">E缸传1</a-option>
                <a-option :value="2"> S缸传2</a-option>
            </a-select>
        </a-form-item>
        <a-form-item style="width:900px;text-align:right;">
            <a-space style="margin-left:805px">
                <a-button v-if="pageData.tableIndex == '1'" type="primary" @click="select">查询</a-button>
                <a-button v-if="pageData.tableIndex == '1'" type="outline" @click="delelt">删除</a-button>
                <a-button v-if="pageData.tableIndex == '1'" type="primary" @click="RPai">排产</a-button>
                <a-button v-if="pageData.tableIndex == '2'" type="primary" @click="RPai">转机台</a-button>
                <a-button v-if="pageData.tableIndex == '2'" type="primary" @click="RPai">保存</a-button>
            </a-space>
        </a-form-item>
    </a-form>
    </template>
    <template #pageTabel>
        <a-tabs   :lazy-load="true" @change="tabsChange">
            <!-- <a-tab-pane title="待排产" key="1">
                  <div style="min-height: 100px">
                      <ToBeScheduled />
                  </div>
              </a-tab-pane>
              <a-tab-pane title="预排产" key="2">
                  <div style="min-height: 100px">
                   <PreScheduledProduction/>
                 
                  </div>
              </a-tab-pane>
              <a-tab-pane title="已排产" key="3">
                  <div style="min-height: 100px">
                    <ScheduledProduction/> 
                  </div>
              </a-tab-pane> -->
            <a-tab-pane title="待排产" key="1">
                    <RcolorStingsNoP  :form="form"></RcolorStingsNoP>
            </a-tab-pane>
            <a-tab-pane title="已排产" key="2">
                    <RcolorStingsYesP  :form="form"></RcolorStingsYesP>
            </a-tab-pane>
        </a-tabs>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts">
// import ToBeScheduled from "./toBeScheduled.vue"
// import ScheduledProduction from "./scheduledProduction.vue"
import RcolorStingsNoP from "./RcolorStingsNoP.vue"
import RcolorStingsYesP from "./RcolorStingsYesP.vue"
import emitter from "@/hooks/useEventBus";

import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
    name: 'productionScheduling',
    components: { RcolorStingsNoP,RcolorStingsYesP },
    setup() {

        const pageData = reactive({
            tableIndex: "1"
        })


        const tabsChange = (e: string | number) => {
            pageData.tableIndex = e as string
        }
        const form: any = reactive({})

        watch(() => form.cylinderTypes, () => {
            if (form.cylinderTypes.length == 1) {
                form.cylinderType = form.cylinderTypes[0]
            } else if (form.cylinderTypes.length == 2) {
                form.cylinderType = ''
            } else {
                form.cylinderType = ''
            }
        })
        // workshops
        watch(() => form.workshops, () => {
            if (form.workshops.length == 1) {
                form.workshop = form.workshops[0]
            } else if (form.workshops.length == 2) {
                form.workshop = ''
            } else {
                form.workshop = ''
            }
        })

        const select = () => {
            emitter.emit('selectIndexOne', form)
        }

        const delelt = () => {
            emitter.emit('deletIndexOne')
        }

        const RPai = ()=>{
            emitter.emit('RPaiIndexOne')
        }
        return {
            RPai,
            delelt,
            select,
            pageData,
            tabsChange,
            form
        }
    },
})
</script>
<style  lang="less">
#main-apss {
    height: 100%;

    .arco-tabs-content {
        border: 0px !important;
    }
}

:deep(.arco-tabs-content) {
    padding: 2px;
}
:deep(.arco-tabs) {
  height: 100%;
}

:deep(.arco-tabs-content) {
  height: 100%;
  padding: 2px;
}

:deep(.arco-tabs-content-list) {
  height: 100%;
}

:deep(.arco-tabs-pane) {
  height: 100%;
}
</style>